<template>
  <div>
   
   <div>
    <el-input v-model="setaser" placeholder="请输入内容" style="width:300px"></el-input>
    <el-input v-model="username" placeholder="请输入关键字" style="width:300px"></el-input>
    <el-input v-model="molie" placeholder="请输入手机号" style="width:300px"></el-input>
   <el-button type="warning" @click="add">搜索</el-button>
   <el-button type="danger" @click="del">重置</el-button>
   </div>

    <el-table :data="tableData.slice((query.pagenum-1)*query.pagesize,query.pagenum*query.pagesize)" border style="width: 100%">
      <el-table-column fixed prop="uid" label="编号" width="150">
        
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="120">
         </el-table-column>
      <el-table-column prop="avatar" label="头像" width="120">
     <template slot-scope="scope">
       <el-image :src="scope.row.avatar"></el-image>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>

      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="120"> </el-table-column>
      <el-table-column prop="created_at" label="时间" width="120">{{tableData.created_at|dateFormat}}</el-table-column>
      <el-table-column prop="status" label="状态" width="300" >
      </el-table-column>
  
      <el-table-column fixed="right" label="操作" width="100">
        <template >
          <el-button type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pagenum"
      :page-size="query.pagesize"
      :total="tableData.length">
    </el-pagination>


  </div>
</template>

<script>
import uilt from '../uilt/list.json'
export default {
  data() {
    return {
      tableData:uilt,
      
         username:'',
         setaser:'',
         molie:'',
       query:{
        pagesize:10,
        pagenum:1,
       },
     
    };
  },
 
  created() {
     this.tableData.forEach(item=>{
       if(item.status==1){
        item.status='启动'
       }else{
         item.status='禁用'
       }
     })
  },
  methods: {
  //  清空重置
  del(){
    this.form=''
  },
  // 点击搜素
  add(){
    if(this.username){
      var ll=uilt.filter(item=>{
  return item.nickname==this.username
  })
  console.log(ll);
   this.tableData=ll

    } 
  if(this.setaser){
        var ll=uilt.filter(item=>{
  return item.status==this.setaser
  })
  console.log(ll);
   this.tableData=ll

  }
  if(this. molie){
        var ll=uilt.filter(item=>{
  return item.mobile==this.molie
  })
  console.log(ll);
   this.tableData=ll

  }
  
  },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
     this.query.pagesize=val
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.query.pagenum=val
      }
  },

};
</script>

<style>

</style>
